<template>
  <div class="personal-form form-contain">
    <div style="margin-top:100px;">
      <label for="number">商户号 :  &nbsp;</label>
      <el-input v-model="input" id="number" style="width:50%" type="number"></el-input>
    </div>
    <div style="margin-top:100px;">
      <label for="number">支付密钥 : </label>
      <el-input v-model="input1" id="number" style="width:50%"></el-input>
    </div>
    <el-button type="primary" class="smt-btn" @click="submits">确定</el-button>
  </div>
</template>

<script>
import {shopNumber, getUser} from '@/api/person'
export default {
  data () {
    return {
      input: '',
      input1: ''
    }
  },
  methods: {
    submits () {
      let name = JSON.parse(localStorage.getItem('user'))
      let params = {
        user_name: name.user_name,
        key: this.input1,
        mch_id: this.input
      }
      shopNumber(params).then(res => {
        if (res.code === 1) {
          this._load()
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        } else {
          this.$message({
            type: 'warning',
            message: '请输入正确的商户号!'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    _load () {
      let name = JSON.parse(localStorage.getItem('user'))
      getUser({user_name: name.user_name}).then(res => {
        this.input1 = res.data.key
        this.input = res.data.mch_id
      })
    }
  },
  mounted () {
    this._load()
  }
}
</script>

<style lang="less">
.personal-form{
  padding-left: 30%;
  .smt-btn{
    display: block;
    margin-top: 100px;
    margin-left: 10%;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
}
</style>
